<template>
    <div>
        <roofVue title="积分商品列表"></roofVue>
        <div style="padding: 5px">
            <van-tabbar v-model="active" :fixed="false" active-color="red">
                <van-tabbar-item>综合</van-tabbar-item>
                <van-tabbar-item @click="sort">
                    价格
                    <van-icon name="sort" />
                </van-tabbar-item>
                <van-tabbar-item>新品</van-tabbar-item>
            </van-tabbar>
        </div>
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <van-grid :column-num="2">
                <van-grid-item
                    v-for="i in setpro"
                    :key="i.id"
                    style="padding: 0.1rem; width: 50vw; height: 70vw"
                    @click="jifen(i)"
                >
                    <img
                        style="width: 100%; height: 20vh"
                        :src="imgurl + i.productDetail.defaultImg"
                        alt
                    />
                    <br />
                    <div style="width: 100%" class="van-ellipsis">{{ i.productDetail.name }}</div>
                    <span>{{ i.jifen }}</span>
                </van-grid-item>
                <van-button class="xiangshang" @click="hui" type="info">
                    <van-icon name="arrow-up" />
                </van-button>
            </van-grid>
        </van-pull-refresh>
    </div>
</template>

<script>
import roofVue from "../other/roof.vue";
export default {
    data() {
        return {
            active: 0,
            isLoading: true,
            finished: false,
            setpro: [],
            total: "",
            isads: true,
        }
    },
    methods: {
        onRefresh() {
            setTimeout(() => {
                this.$toast("刷新成功");
                this.isLoading = false;
            }, 1000);
        },
        onLoad() {
            // 异步更新数据
            // setTimeout 仅做示例，真实场景中一般为 ajax 请求
            setTimeout(() => {
                // for (let i = 0; i < 10; i++) {
                //   this.list.push(this.list.length + 1);
                // }
                this.index++;
                this.getpro();
                // 加载状态结束
                this.loading = false;

                // 数据全部加载完成
                if (this.total <= this.index) {
                    this.finished = true;
                }
            }, 1000);
        },
        // 回顶部
        hui() {
            window.scrollTo(0, 0);
        },
        // 排序
        sort() {
            if (this.isads) {
                for (let i = 0; i < this.setpro.length - 1; i++) {
                    //外层循环管趟数
                    for (let j = 0; j < this.setpro.length - i - 1; j++) {
                        //里面的循环管 每一趟的交换次数
                        //内部交换2个变量的值 前一个和后面一个数组元素相比较
                        if (this.setpro[j].jifen < this.setpro[j + 1].jifen) {
                            var temp = this.setpro[j];
                            this.setpro[j] = this.setpro[j + 1];
                            this.setpro[j + 1] = temp;
                        }
                    }
                }
                console.log(this.setpro);
            } else {
                for (let i = 0; i < this.setpro.length - 1; i++) {
                    //外层循环管趟数
                    for (let j = 0; j < this.setpro.length - i - 1; j++) {
                        //里面的循环管 每一趟的交换次数
                        //内部交换2个变量的值 前一个和后面一个数组元素相比较
                        if (this.setpro[j].jifen > this.setpro[j + 1].jifen) {
                            var temp = this.setpro[j];
                            this.setpro[j] = this.setpro[j + 1];
                            this.setpro[j + 1] = temp;
                        }
                    }
                }
                console.log(this.setpro);
                this.getpro();
            }
            this.isads = !this.isads;
        },
        // 跳转
        product(id) {
            this.Sto.Session.set("productId", id);
            this.$router.push("/product");
        },
        //  请求积分商品列表
        getpro() {
            this.$post(this.url2 + "/jifen/selectJifenProduct", {}).then(res => {
                console.log(res);
                if (res.errorCode == '0') {
                    this.setpro = res.data
                    console.log(this.setpro);
                }
            })
        },
        jifen(i) {
            this.Sto.Session.set("jifenproduct", i)
            this.$router.push("/jifenxiangq")
        }
    },
    components: {
        roofVue
    },
    created() {
        this.getpro()
    },
}
</script>

<style  scoped>
.xiangshang {
    position: fixed;
    bottom: 4rem;
    right: 1rem;
}
</style>
